<template>
  <div class="shareInfo">
    <navBar :path="repath"></navBar>
    <div class="content">
      <h3 class="title">
        {{ info.title }}
      </h3>
      <div class="other">
        <div class="o1">{{ info.updated_at | formatTime }}</div>
        <i class="iconfont o2">&#xe644;</i>
        <div class="o3">{{ info.read }}</div>
        <i class="iconfont o4">&#xe639;</i>
        <div class="o5" @click="star">{{ info.star }}</div>
      </div>
      <div class="content-html" v-html="info.content"></div>
      <div class="comment">
        <h3 class="title">评论<span>87</span></h3>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没货了,下次再来"
          @load="load"
        >
          <div
            class="comment-item"
            v-for="(item, index) in commentList"
            :key="index"
          >
            <div class="comment-item-top">
              <img
                class="c1"
                v-if="item.author.avatar"
                :src="baseUrl + item.author.avatar"
                alt=""
                @click="reComment(item.id)"
              />
              <img
                v-else
                class="c1"
                src="@/assets/logo.png"
                alt=""
                @click="reComment(item.id)"
              />
              <div class="c2">
                <div class="c2-top">{{ item.author.nickname }}</div>
                <div class="c2-bottom">{{ item.created_at | formatTime }}</div>
              </div>
              <div class="c3">{{ item.star }}</div>
              <i
                class="iconfont c4"
                @click="toCommentStar(item)"
                :class="{
                  red: getCollect('starComments', +item.id),
                }"
                >&#xe639;</i
              >
            </div>
            <div class="comment-item-middle">{{ item.content }}</div>
            <div
              class="comment-item-bottom"
              v-if="item.children_comments.length > 0"
            >
              <div
                class="bottom-item"
                v-for="(item2, index2) in item.children_comments"
                :key="index2"
              >
                <div class="left">{{ item2.author }}:</div>
                <div class="right">{{ item2.content }}</div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="tool">
        <div class="t1" @click="shoreComment">我来讲两句</div>
        <div
          class="t2"
          :class="{ red: getCollect('collectArticles', +id) }"
          @click="collect"
        >
          <div class="iconfont icon">&#xe63c;</div>
          <div class="num">{{ info.collect }}</div>
        </div>
        <div
          class="t2"
          :class="{ red: getCollect('starArticles', +id) }"
          @click="star"
        >
          <div class="iconfont icon">&#xe638;</div>
          <div class="num">{{ info.star }}</div>
        </div>
        <div class="t2">
          <div class="iconfont icon">&#xe63e;</div>
          <div class="num">{{ info.share }}</div>
        </div>
      </div>
      <van-popup v-model="isShow" position="bottom">
        <div class="send">
          <van-field
            class="field"
            v-model="fieldVlaue"
            type="textarea"
            rows="3"
            placeholder="都安静，我来讲两句"
          ></van-field>
          <div class="send-btn" @click="send">发送</div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  articlesShareInfo,
  articlesComments,
  toArticlesComments,
  articlesCollect,
  articlesStar,
  articleCommentsStar,
} from "@/api/find.js";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      id: this.$route.params.id,
      repath: this.$route.query.repath,
      info: "",
      commentList: [],
      baseUrl: process.env.VUE_APP_URL,
      loading: false,
      finished: false,
      currentPage: 0,
      pageSize: 3,
      isShow: false,
      fieldVlaue: "",
    };
  },
  computed: {
    ...mapState(["userInfo", "isLogin"]),
    ...mapGetters(['getCollect']),
    commentStar() {
      return (id) => {
        return this.isLogin && this.userInfo.starComments.includes(+id);
      };
    },
  },
  created() {
    articlesShareInfo(this.id).then((res) => {
      this.info = res.data.data;
      // window.console.log("面经详情", res);
    });
  },
  methods: {
    load() {
      this.currentPage++;
      const _q = {
        limit: (this.currentPage - 1) * this.pageSize,
        start: this.pageSize,
      };
      articlesComments(this.id, _q).then((res) => {
        this.commentList.unshift(...res.data.data.list);
        this.loading = false;
        if (this.commentList.length >= res.data.data.total) {
          this.finished = true;
        }
        // window.console.log("面经评论", res);
      });
    },
    // 文章评论
    shoreComment() {
      this.parent = "";
      this.isShow = true;
    },
    // 回复评论
    reComment(id) {
      this.parent = id;
      this.isShow = true;
    },
    init() {
      this.currentPage = 0;
      this.commentList = [];
      this.loading = false;
      this.finished = true;
      this.$nextTick(() => {
        this.finished = false;
      });
    },
    send() {
      if (this.fieldVlaue != "") {
        toArticlesComments({
          content: this.fieldVlaue,
          article: this.id,
          parent: this.parent,
        }).then((res) => {
          this.fieldVlaue = "";
          this.$toast.success("讲话成功~帅了一批");
          this.isShow = false;
          window.console.log("发表评论", res);
          if (this.parent === "") {
            this.commentList.unshift(res.data.data);
          } else {
            let _index = this.commentList.findIndex((item, index) => {
              return item.id === this.parent;
            });
            this.commentList[_index].children_comments.unshift(res.data.data);
          }
        });
      } else {
        this.$toast.fail("发表失败");
      }
    },
    // 收藏文章
    collect() {
      articlesCollect({ id: this.id }).then((res) => {
        window.console.log("收藏文章", res);
        if (res.data.data.list.includes(+this.id)) {
          this.$toast.success("收藏成功");
        } else {
          this.$toast("取消收藏");
        }
        this.info.collect = res.data.data.num;
        this.$store.commit("setUserInfoOther", {
          key: "collectArticles",
          value: res.data.data.list,
        });
      });
    },
    // 点赞文章
    star() {
      articlesStar({ article: this.id }).then((res) => {
        window.console.log("点赞文章:", res);
        if (res.data.data.list.includes(+this.id)) {
          this.$toast.success("点赞成功");
        } else {
          this.$toast("取消点赞");
        }
        this.info.star = res.data.data.num;
        this.$store.commit("setUserInfoOther", {
          key: "starArticles",
          value: res.data.data.list,
        });
      });
    },
    // 评论点赞
    toCommentStar(item) {
      articleCommentsStar({ id: +item.id }).then((res) => {
        window.console.log(res);
        if (res.data.data.list.includes(+item.id)) {
          this.$toast.success("点赞成功");
        } else {
          this.$toast("取消点赞");
        }
        item.star = res.data.data.num;
        this.$store.commit("setUserInfoOther", {
          key: "starComments",
          value: res.data.data.list,
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.shareInfo {
  .content {
    padding: 20px 10px 90px 15px;
    .title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      text-align: left;
      color: #181a39;
      line-height: 25px;
    }
    .other {
      margin-top: 10px;
      display: flex;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #b4b4bd;
      line-height: 16px;
      letter-spacing: 0px;
      .o1 {
        flex: 1;
      }
      .o2,
      .o4 {
        margin-right: 5px;
      }
      .o3 {
        margin-right: 25px;
      }
    }
    .content-html {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 27px;
      margin-top: 28px;
      letter-spacing: 0px;
      /deep/ img {
        width: 100%;
      }
    }
    .comment {
      margin-top: 10px;
      .title {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #222222;
        line-height: 25px;
        letter-spacing: 0px;
        position: relative;
        span {
          position: absolute;
          top: -5px;
          margin-left: 5px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #b4b4bd;
          line-height: 16px;
          letter-spacing: 0px;
        }
      }
      .comment-item {
        margin-top: 30px;
        .comment-item-top {
          display: flex;
          align-items: center;
          .c1 {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            margin-right: 8px;
          }
          .c2 {
            flex: 1;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Semibold;
            text-align: left;
            line-height: 16px;
            letter-spacing: 0px;
            .c2-top {
              font-weight: 600;
              color: #545671;
            }
            .c2-bottom {
              margin-top: 3px;
              font-weight: 400;
              color: #b4b4bd;
            }
          }
          .c3 {
            font-size: 12px;
            color: #b4b4bd;
            margin-right: 5px;
          }
          .c4 {
            width: 25px;
            height: 25px;
          }
        }
        .comment-item-middle {
          margin-top: 12px;
          margin-bottom: 5px;
          padding-left: 40px;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 500;
          text-align: justify;
          color: #181a39;
          line-height: 27px;
          letter-spacing: 0px;
        }
        .comment-item-bottom {
          margin-left: 40px;
          padding: 15px;
          background-color: #f7f4f5;
          border-radius: 5px;
          .bottom-item {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Semibold;
            text-align: left;
            color: #545671;
            line-height: 20px;
            letter-spacing: 0px;
            .left {
              margin-right: 8px;
              font-weight: 600;
            }
            .right {
              flex: 1;
              font-weight: 400;
              word-break: break-all;
            }
          }
        }
      }
    }
    .tool {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 75px;
      display: flex;
      align-items: center;
      background-color: #fff;
      .t1 {
        flex: 1;
        background-color: #f7f4f5;
        border-radius: 8px;
        margin-left: 10px;
        padding-left: 10px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b4b4bd;
        line-height: 40px;
        letter-spacing: 0px;
      }
      .t2 {
        color: #ccc;
        text-align: center;
        margin-left: 15px;
        .icon {
          font-size: 28px;
        }
        .num {
          font-size: 12px;
        }
      }
    }
    .send {
      padding: 15px;
      .field {
        background-color: #f7f4f5;
        padding: 10px 15px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #00b8d4;
        line-height: 20px;
        letter-spacing: 0px;
        border-radius: 5px;
      }
      .send-btn {
        float: right;
        margin-top: 10px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #b4b4bd;
        line-height: 24px;
        letter-spacing: 0px;
      }
    }
  }
  .red {
    color: red !important;
  }
}
</style>